<template>
  <div class="vant_table_outer">
    <table cellspacing="0" :style="bgcolor" style="width: 100%" class="vant_table">
      <tr class="tr_header">
        <th class="th" v-for="(item, index) in columns" :key="index">
          {{ item.label }}
        </th>
      </tr>
      <tr class="tr_header" v-for="(item, index) in tableData" :key="index">
        <td v-for="(context, i) in columns" :key="i">
          {{ item[context.prop] }}
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: 'VantTable',
  props: {
    // bgcolor: Object,
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    // thHeight: {},
    // tdHeight: {},
    // option: {
    //   type: Object,
    //   default: () => {
    //     return {
    //       isBorder: true,
    //       columns: () => [],
    //     }
    //   },
    // },
    // styleObj: {
    //   type: Object,
    //   default: () => {
    //     return {
    //       bgColor: '',
    //       headerBgColor: '',
    //       borderColor: '',
    //     }
    //   },
    // },
  },
  created() {},
}
</script>

<style lang="less" scoped>
// .vant-table {
//   .table {
//     border-radius: 0.185185rem;
//     .th {
//       height: 1.074074rem;
//       line-height: 1.074074rem;
//       // background-color: #393943;
//       text-align: center;
//       border-top-left-radius: 0.185185rem;
//       border-top-right-radius: 0.185185rem;
//     }
//     .list-tr {
//       height: 1.074074rem;
//       line-height: 1.074074rem;
//     }
//     .list-tr:nth-child(2n) {
//       // background-color: #33333b;
//     }
//   }
// }
</style>
